<template>
    <div class="activity">
        <img
            class="activity-top"
            src="@/assets/images/home/activity-top-img.gif"
            @click="goActivity"
        />
        <div class="activity-main">
            <div
                class="goods-item"
                v-for="(item,index) of experienceList"
                :key="index"
                @click="goDetail(item.id,1)"
            >
                <img
                    class="goods-img"
                    v-lazy="item.imgs[0].title_img"
                />
                <div class="goods-info">
                    <div class="goods-name">{{item.title}}</div>
                    <div class="goods-detail">{{item.title_sub}}</div>
                    <div class="goods-price">原价：￥{{item.price_market | currency}}</div>
                    <div class="goods-price-now">99会员特享： ￥<span class="large-price">{{item.price | currency}}</span></div>
                    <div class="goods-other-box">
                        <img
                            class="goods-tips-img"
                            src="@/assets/images/home/goods-tips-img.png"
                        />
                        <img
                            class="goods-buy-btn"
                            src="@/assets/images/home/be-vip-icon.png"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Activity',
    data() {
        return {
            experienceList: [],
            nowPage: 1,
            totalPage: 1,
            isLoading: false
        }
    },
    mounted() {
        this.getExperienceList()
    },
    methods: {
        goActivity() {
            this.$router.push('/experience2')
        },
        getExperienceList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                price: 99,
                is_upgrade: 1,
                page_size: 999,
                page: this.nowPage
            })
            this.axios.post('/api/goods/list.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.experienceList = this.experienceList.concat(
                        data.data.list
                    )
                    this.totalPage = Math.ceil(data.data.page_info.total / 10)
                    this.nowPage++
                    this.isLoading = false
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        goDetail(id, type) {
            this.$router.push({
                path: '/goodsDetail',
                query: {
                    goodsId: id,
                    goodsType: type
                }
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.activity
    padding 0.37rem 0.27rem 0.27rem 0.27rem
    background #fff
    .activity-top
        width 100%
    .activity-main
        padding 0.68rem 0.1rem 0.32rem 0.1rem
        background #c91028
        border-radius 0 0 10px 10px
        .goods-item
            display flex
            align-items center
            padding 0.32rem 0.1rem
            background #fff
            border-radius 5px
            margin-bottom 0.32rem
            .goods-img
                width 2.93rem
                height 2.93rem
            .goods-info
                position relative
                flex 1
                min-width 1px
                height 2.93rem
                margin 0 0.32rem
                .goods-name
                    margin-top 0.12rem
                    font-size 0.37rem
                    color #333
                    overflow hidden
                    text-overflow ellipsis
                    white-space nowrap
                .goods-detail
                    margin-top 0.12rem
                    font-size 0.32rem
                    color #666
                    overflow hidden
                    text-overflow ellipsis
                    white-space nowrap
                .goods-price
                    margin-top 0.21rem
                    font-size 0.32rem
                    color #999
                .goods-price-now
                    margin-top 0.21rem
                    font-size 0.32rem
                    color #d7463c
                .large-price
                    font-size 0.5rem
                .goods-other-box
                    margin-top 0.1rem
                    display flex
                    align-items center
                    justify-content space-between
                    .goods-tips-img
                        height 0.58rem
                    .goods-buy-btn
                        height 0.65rem
</style>

